<template>
  <div class="profile">
    <Modal v-if="modalActive" :modalMessage="modalMessage" v-on:close-modal="closeModal" />
    <div class="container">
      <h2>修改资料</h2>
      <div class="profile-info">
        <div class="initials" >{{ user.username.split('')[0] }}</div>
        <div class="admin-badge">
          <adminIcon class="icon" />
          <span>个人信息</span>
        </div>
        <div class="input">
          <label for="username">用户名:</label>
          <input type="text" :placeholder="user.username" maxlength="10" id="username" v-model="username" />
        </div>
        <div class="input">
          <label for="email">电子邮箱:</label>
          <input disabled type="text" id="email" v-model="user.email" />
        </div>
        <div v-show="err" class="error">
        {{ this.errMsg }}
        </div>
        <button @click="updateProfile">保存信息</button>
      </div>
    </div>
  </div>
</template>

<script>
import Modal from "../components/Modal"
import adminIcon from "../assets/Icons/user-crown-light.svg"
import { updateUser } from '@/api/user'
import { setItem } from '@/utils/storage'
export default {
  name: "Profile",
  components: {
    Modal,
    adminIcon,
  },
  data() {
    return {
      modalMessage: "保存成功",
      modalActive: null,
      err: null,
      errMsg: null,
      user: this.$store.state.user,
      username:''
    };
  },
  methods: {
    async updateProfile() {
      let data = {
        user : {
          username: this.username,
          _id :this.user._id
        }
      }
      try {
        console.log(data)
        await updateUser(data)
        this.err = null
        this.errMsg = null
        this.modalActive = !this.modalActive
        this.$nextTick(()=>{
          this.user.username = data.user.username
        })
        this.user.username = this.username
        setItem('Blog_USER',this.user)
      } catch (error) {
        this.err = true
        this.errMsg = error.response.data.errors[0].msg
      }
    },
    closeModal() {
      this.modalActive = !this.modalActive;
    },
  },
};
</script>
<style lang="scss" scoped>
.profile {
  .container {
    max-width: 1000px;
    padding: 60px 25px;

    h2 {
      text-align: center;
      margin-bottom: 16px;
      font-weight: 300;
      font-size: 32px;
    }

    .profile-info {
      border-radius: 8px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      padding: 32px;
      background-color: #f1f1f1;
      display: flex;
      flex-direction: column;
      max-width: 600px;
      margin: 32px auto;

      .initials {
        position: initial;
        width: 80px;
        height: 80px;
        font-size: 32px;
        background-color: #303030;
        color: #fff;
        display: flex;
        align-self: center;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }

      .admin-badge {
        display: flex;
        align-self: center;
        color: #fff;
        font-size: 14px;
        padding: 8px 24px;
        border-radius: 8px;
        background-color: #303030;
        margin: 16px 0;
        text-align: center;
        text-transform: capitalize;

        .icon {
          width: 14px;
          height: auto;
          margin-right: 8px;
        }
      }

      .input {
        margin: 16px 0;

        label {
          font-size: 14px;
          display: block;
          padding-bottom: 6px;
        }
        input {
          width: 100%;
          border: none;
          background-color: #f2f7f6;
          padding: 8px;
          height: 50px;
          @media (min-width: 900px) {
          }

          &:focus {
            outline: none;
          }
        }
      }

      button {
        align-self: center;
      }
    }
  }
}
</style>